<template>
	<view class="container">

		<view class="search-body">
			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
		</view>

		<view class="tag">
			<view class="tag-view">
				<uni-tag :circle="true" :inverted="inverted[0]" text="审核通过" type="primary" @click="setInverted(0)" />
			</view>
			<view class="tag-view">
				<uni-tag :circle="true" :inverted="inverted[1]" text="审核不通过" type="primary" @click="setInverted(1)" />
			</view>
			<view class="tag-view">
				<uni-tag :circle="true" :inverted="inverted[2]" text="删除活动" type="primary" @click="setInverted(2)" />
			</view>
			<view class="tag-view">
				<uni-tag :circle="true" :inverted="inverted[3]" text="删除评论" type="primary" @click="setInverted(3)" />
			</view>
			<view class="tag-view">
				<uni-tag :circle="true" :inverted="inverted[4]" text="删除账号" type="primary" @click="setInverted(4)" />
			</view>
		</view>


		<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th width="140" align="center">日期</uni-th>
				<uni-th width="100" align="center">操作</uni-th>
				<uni-th width="60" align="center">目标id</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in historyList" :key="index">
				<uni-td align="center">{{ item.time }}</uni-td>
				<uni-td align="center">{{ item.type }}</uni-td>
				<uni-td align="center">{{ item.sourceId }}</uni-td>
			</uni-tr>
		</uni-table>
		<view>
			<uni-load-more :status=status @clickLoadMore="loadMore"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apiUrl: "http://localhost:8080/",
				historyList: [

				],
				inverted: [false, false, false, false],
				pageNum: 1,
				pageSize: 10,
				type: null,
				beginTime: null,
				endTime: null,
				order: false,
				status: "more",
				end: false,
				count: 0,
				datetimerange:[]
			}
		},
		watch: {
			datetimerange(newval) {
				console.log("范围选:", this.datetimerange[0]);
				this.beginTime = this.datetimerange[0];
				this.endTime = this.datetimerange[1];
				this.clear();
				this.searchHistory();
			}
		},
		onShow() {
			this.clear();
			this.searchHistory();
		},
		methods: {
			setInverted(i) {
				this.inverted[i] = !(this.inverted[i]);
				this.clear();
				console.log(this.inverted);
				let type = "";
				if (!this.inverted[0]) {

					type = type + "审核通过";
				}
				if (!this.inverted[1]) {
					if (type == "") {
						type = type + "审核不通过";
					} else {
						type = type + ",审核不通过";
					}
				}
				if (!this.inverted[2]) {
					if (type == "") {
						type = type + "删除活动";
					} else {
						type = type + ",删除活动";
					}
				}
				if (!this.inverted[3]) {
					if (type == "") {
						type = type + "删除评论";
					} else {
						type = type + ",删除评论";
					}
				}
				if (!this.inverted[4]) {
					if (type == "") {
						type = type + "删除账号";
					} else {
						type = type + ",删除账号";
					}
				}
				this.type = type;
				console.log(this.type);
				this.searchHistory();
			},
			clear() {
				this.status = "more";
				this.historyList = [];
				this.pageNum = 1;
				this.count = 0;
				this.end = false;
			},
			searchHistory() {
				uni.request({
					method: 'GET',
					url: this.apiUrl + 'operation/' + uni.getStorageSync("uid"),
					header: {
						Authorization: uni.getStorageSync("token")
					},
					data: {
						'pageNum': this.pageNum,
						'pageSize': this.pageSize,
						'type': this.type,
						'beginTime': this.beginTime,
						'endTime': this.endTime,
						'order': this.order
					},
					success: (res) => {
						console.log(res.data);
						let operations = res.data.records;
						let size = operations.length;
						for (let i = 0; i < size; i++, this.count++) {
							this.historyList.push({
								"sourceId": operations[i].sourceId,
								"type": operations[i].type,
								"time": operations[i].time
							});
						}
						if (size < this.pageSize) {
							this.end = true;
							this.status = "no-more";
						}
						uni.stopPullDownRefresh()
					},
					fail: (err) => {
						return uni.showToast({
							icon: 'loading',
							title: '请求失败'
						})
						reject(err)
					}
				})
			},
			loadMore() {
				if (this.end) return;
				this.pageNum += 1;
				this.searchHistory();
			},
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}

	.search-body {
		padding: 5px;
	}

	.uni-row {
		padding: 15px;
		align-items: center;
	}

	.tag {
		display: flex;
		flex-direction: row;
		padding-bottom: 5%;
	}

	.tag .tag-view {
		padding-left: 1.5px;
	}
</style>
